import React from 'react';
import {findDOMNode} from 'react-dom';
import echarts from 'echarts';
import * as ChartsStyle from './ChartsBarHorizon.less';

export default class ChartsBarHorizon extends React.Component {
  static propTypes = {
    name: React.PropTypes.string,
  };

  constructor(props) {
    super(props);
  };
  drawChart = () => {
  	//引入echaets,链接画布
    let { data, name,  color=['#c9f3f3','#b1eded','#92e6e6','#64dcdc'] } =this.props;
  	let myChart = echarts.init(findDOMNode(this.refs.charts));
  	let option = {};
  	//处理图表数据
  	option = {
    
    legend: {
        selectedMode:false,
        left:'3%',
        top:'3%',
        formatter:`${name}`,
        data: ['视频广告']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis:  {
        type: 'value',
        show:false

    },
    yAxis: {
        type: 'category',
        data: [''],
        show:false
    },
    series: [
        {
            name: '直接访问',
            type: 'bar',
            stack: '总量',
            label: {
                normal: {
                  formatter:'容易{c}%',
                    textStyle:{
                      color:'#6a6d72'
                    },
                    show: true,
                    position: 'inside'
                }
            },
            itemStyle:{
              normal:{
                color:color[0]
            }
          },
            data: [data[0]]
        },
        {
            name: '邮件营销',
            type: 'bar',
            stack: '总量',
            label: {
                normal: {
                    show: true,
                    formatter:'一般{c}%',
                    position: 'inside',
                     textStyle:{
                      color:'#6a6d72'
                    },
                }
            },
            itemStyle:{
              normal:{
                color:color[1]
            }
          },
            data: [data[1]]
        },
        {
            name: '联盟广告',
            type: 'bar',
            stack: '总量',
            label: {
                normal: {
                    show: true,
                    position: 'inside',
                    formatter:'较难{c}%',
                     textStyle:{
                      color:'#6a6d72'
                    }
                }
            },
            itemStyle:{
              normal:{
                color:color[2]
            }
          },
            data: [data[2]]
        },
        {
            name: '视频广告',
            type: 'bar',
            stack: '总量',
            label: {
                normal: {
                    show: true,
                    position: 'inside',
                    formatter:'压轴{c}%',
                     textStyle:{
                      color:'#6a6d72'
                    }
                }
            },
            itemStyle:{
              normal:{
                color:color[3]
            }
          },
            data: [data[3]]
        }
    ]
};
  	//绘制图表
  	myChart.setOption(option);

  };
  componentDidMount() {
  	//初始加载绘图
  	this.drawChart()
  };
  componentWillReceiveProps(nextProps) {
  	//数据变化画图
  	this.drawChart()
  }
  render() {
    return (
      <div ref = 'charts' className={ChartsStyle.chartsBarHorizon} ></div>
    );
  }
};
